<template>
  <q-modal v-model="modalVisible" :header="`${$t('Misc.SpecifyDetails', { name: $t('CarrierCore.RackType') })}`"
           :menuBtn="false" :persistent="false" width="600">
    <QInfo :columns="columns" :rowInfo="rowInfo" cols="2" headerWidth="90"></QInfo>
    <div class="warning-tips text-weight-medium row items-center no-wrap q-my-md">
      <q-icon class="map-warning-tips-icon" name="mdi-information-variant" size="1.25rem"></q-icon>
      <div>{{ $t('CarrierCore.StorageSlotInfo') }}</div>
    </div>
    <q-item v-for="(row, rowIndex) in storageSlotRows" :key="rowIndex" :class="rowIndex % 2 === 0 ? 'bg-grey-2' : ''"
            class="q-info q-pa-sm rounded-borders text-selectable">
      <q-item-section class="col-auto text-grey-6 text-right text-body2">
        <qx-tooltip :rowsNum="2" :style="{ width: '90px'}">{{ row.label1 }}</qx-tooltip>
      </q-item-section>
      <q-item-section class="text-body1 text-weight-medium">
        <qx-tooltip :rowsNum="2">{{ row.value1 }}</qx-tooltip>
      </q-item-section>
      <q-item-section class="col-auto text-grey-6 text-right text-body2">
        <qx-tooltip :rowsNum="2" :style="{ width: '90px'}">{{ row.label2 }}</qx-tooltip>
      </q-item-section>
      <q-item-section class="text-body1 text-weight-medium">
        <qx-tooltip :rowsNum="2">{{ row.value2 }}</qx-tooltip>
      </q-item-section>
    </q-item>
  </q-modal>
</template>
<script setup>
import { i18n } from 'boot/i18n.js'
import { directions } from 'src/views/CarrierCore/enum.js'
import { formatColumns } from 'src/views/CarrierCore/RackType.js'
import { computed, ref, watch } from 'vue'

const props = defineProps(
  { rowInfo: { type: Object, default: () => ({}) }, storageSlotInfo: { type: Object, default: () => ({}) } })
const modalVisible = defineModel('modelValue', { type: Boolean, default: false })

const columns = ref([])
const storageSlotRows = computed(() => {
  const { shelfDirection = '' } = props.rowInfo || {}, cols = []
  for (const key of shelfDirection.split(',')) {
    const label = directions.value.find(el => el.value === key)?.label
    for (const row of (props.storageSlotInfo[key] || [])) {
      cols.push({
        label1: `${i18n.t('CarrierCore.StorageSlotCountTips', { dir: label, layer: row.curShelfLayerNumber })}`,
        value1: row.shelfLatticeNumber, label2: `${i18n.t('CarrierCore.StorageSlotSize')}`,
        value2: formatValue(row.agvMasDataShelfPositionTypeVo)
      })
    }
  }
  return cols
})

watch(modalVisible, val => val && initColumns())
const initColumns = () => columns.value = formatColumns(props.rowInfo)
const formatValue = row => {
  const msg = row.k === '1' ? i18n.t('Misc.DoubleDeepSlot') : i18n.t('Misc.NonDoubleDeepSlot')
  return `${row.positionDepth || 0}x${row.positionWidth || 0}x${row.positionHeight || 0}mm ${msg}`
}
</script>
<style lang="scss" scoped>
.q-info {
  min-height: 3rem;
}
</style>